<template>
    <div>
        <div v-for="image in imageList" :key="image.id" class="image-item">
            <div>
                <p class="image-name" @click="goRelease(image.id)">{{image.registry}}{{image.imageName}}:{{image.imageTag}}</p>
                <p>{{image.createdBy}}</p>
            </div>
            <div style="text-align: right; display: flex; align-items:center">
                <div>
                    <div>
                        <span style="font-size: 14px;font-weight: bold;margin-right: 8px">{{image.commitSha.substring(0, 8)}}</span>
                        <Tooltip content="复制提交SHA" placement="top-start">
                            <Icon type="md-copy" size="16" @click="copy(image.commitSha)"/>
                        </Tooltip>
                    </div>
                    <p>{{image.createdAt}}</p>
                </div>
                <div style="margin-left: 32px">
                    <Button @click="showDrawer(image.id)">release</Button>
                </div>
            </div>
        </div>
        <div style="text-align: center;width: 100%; margin-top: 16px">
            <Page v-if="imageTotal > 20" :total="imageTotal" :page-size="params.pageSize" :current="params.pageNum" @on-change="pageChange"/>
        </div>
        <Drawer title="发布配置" width="700" v-model="show" class="release-drawer">
            <Release :imageId="currentId"></Release>
        </Drawer>
    </div>
</template>

<script>
    import Release from './Release';
    export default {
        data(){
            return {
                show: false,
                id: this.$route.params.id,
                imageList: [],
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    filters:[{
                        field: 'appId',
                        operator: 'EQ',
                        value: this.$route.params.id
                    }],
                    orders:[{
                        field: 'createdAt',
                        orderType: 'DESC'
                    }]
                },
                imageTotal: 0,
                currentId: ''
            }
        },
        components:{
            Release
        },
        created(){
            this.searchImage(this.params);
        },
        methods:{
            searchImage(params){
                this.$axios.post('/mdo/api/v1/appImages/page', params).then(res => {
                    this.imageList = res.data.list;
                    this.imageTotal = res.data.total;
                });
            },
            pageChange(pageNum){
                this.params.pageNum = pageNum;
                this.searchImage(this.params);
            },
            goRelease(id){
                this.$router.push({name: 'release', params:{image: id}});
            },
            showDrawer(id){
                this.show = true;
                this.currentId = id;
            },
            copy(sha){
                let oInput = document.createElement('input');
                oInput.value = sha;
                oInput.style.position = "absolute";
                oInput.style.top = "0";
                oInput.style.left = "0";
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                if (document.execCommand('Copy')) {
                    this.$Message.info('复制成功');
                }
                document.body.removeChild(oInput);
            }
        }
    }
</script>

<style lang="less" scoped>
    .image-item{
        padding: 8px 0;
        height: 64px;
        border-bottom: 1px solid @border-color-base;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .image-name{
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            &:hover{
                text-decoration: underline;
            }
        }

        i{
            cursor: pointer;
        }

        &:last-child{
             border-bottom: none;
         }
    }
</style>

<style lang="less">
    .release-drawer{
        .ivu-drawer-body{
            padding: 0;
        }
    }
</style>